<template>
  <div class="container">
    <el-dialog title="已选用户" :visible.sync="dialogShow" width="1000px">
      <!-- 第一行——操作按钮
      <div class="filter-container">
        手机号：
        <el-input v-model="phone" class="mr20" placeholder="请输入" style="width: 300px" clearable />

        <el-button class="el-icon-search" type="primary" style="width: 80px" @click="handleFilter">查询</el-button>
      </div> -->
      <!-- / 第一行——操作按钮 -->

      <!-- table表格 -->
      <el-table ref="multipleTable" :data="list" :stripe="true" style="width: 100%">
        <!--      <el-table-column type="selection" width="160px" > </el-table-column>  @selection-change="handleSelectionChange"-->


        <!-- 标题 -->
        <el-table-column align="left" prop="realname" label="姓名" width="300px" />
        <el-table-column align="left" prop="phone" label="手机号码"  />



        <!-- 操作 -->
        <el-table-column label="操作" width="200px" fixed="right" align="center">
          <template slot-scope="{ row, $index }">

            <el-button   type="text" @click="delItem(row, $index)">删除</el-button>

            <!-- <el-button type="text" @click="topItem(row)">置顶</el-button> -->
          </template>
        </el-table-column>
        <!-- / 操作 -->
      </el-table>
      <!-- / table表格 -->

      <!--      <pagination-->
      <!--        v-show="total > 0"-->
      <!--        :total="total"-->
      <!--        prev-text="上一页"-->
      <!--        next-text="下一页"-->
      <!--        layout="prev, pager, next, jumper"-->
      <!--        :page.sync="listQuery.page"-->
      <!--        :limit.sync="listQuery.limit"-->
      <!--        pageBackground="none"-->
      <!--      />-->

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        next-text="下一页"
        layout="prev, pager, next, jumper"
        :page.sync="listQuery.pageNo"
        :limit.sync="listQuery.pageSize"
        @current-change="currentChange"
        @pagination="getList"
      />
      <!-- / 分页 -->
      <!--      <editDrawer ref="editDrawer" @refresh="refresh"/>-->

      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogShow = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="submit"-->
      <!--          >确 定</el-button-->
      <!--        >-->
      <!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' // 分页
  import { sys_role_userRoleList,sys_role_deleteUserRole } from '@/api/sys_role'

  export default {
    components: { Pagination },
    props: {},
    data() {
      return {

        phone: '', //  搜索
        // 时间选择器
        list: [], // 内容列表
        total: 0, // 总页数
        listLoading: true,

        // 查询参数
        listQuery: {
          phone: null,
          roleId: null,
          column:"createTime",
          field:"id,,username,realname,status_dictText,action",
          pageNo: 1,
          pageSize: 10,

        },
        dialogShow: false,

      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 销毁
    destroyed() {},
    // 方法
    methods: {
      cancelForm() {
        this.loading = false
        this.dialog = false
        // clearTimeout(this.timer);
      },
      // 分页数据
      getList() {
        console.log('-----获得分页数据-------')
        this.listLoading = true

        this.listQuery.phone = this.phone

        // if (this.phone != '' && this.phone != null) {
        //   this.listQuery.phone = '*' + this.phone + '*'
        // } else {
        //   this.listQuery.phone = ''
        // }

        sys_role_userRoleList(this.listQuery).then(response => {
          const list = response.result.records

          for (let i = 0; i < list.length; i++) {
            list[i].addStatus = 0
            // let  element=list[i];
            // console.log(element);
          }
          this.list = list

          this.total = response.result.total
          this.listLoading = false



        })
      },


      // 搜索
      handleFilter() {
        this.listQuery.page = 1

        console.log('search:' + this.phone)
        // if(''!=this.title&&null!=this.title){
        //   this.listQuery.title = "*"+this.title+"*";
        // }else {
        //   this.listQuery.title ="";
        // }

        this.getList(this.listQuery)
      },
      currentChange(e) {
        console.log('currentChange' + e)
      },

      handleSelectionChange(val) {
        console.log('handleSelectionChange' + val)
        this.multipleSelection = val
      },


      // 删除
      delItem(row, index) {


        let p= {
          params: {	// 请求参数拼接在url上
            roleId: this.listQuery.roleId,
            userId:row.id
          }
        };



        this.$confirm('确定要移除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          sys_role_deleteUserRole(p).then(response => {
            row.addStatus = 0
            this.$message({
              type: 'success',
              message: '删除成功!'
            })

            // this.$emit('refresh')
            this.getList()
          })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 保存
      addItem(row) {
        // console.log("submit2")

        const blocks = []
        const that = this
        let i = 0

        // console.log("您选择的数据："+row.id +" " +row.title,index);
        const b = {}
        b.id = this.$createBlockDataId(that.blockId, row.id)
        b.sourceId = row.id
        b.open = true
        b.type = 'cms_content'
        b.title = row.title
        b.blockId = that.blockId
        b.image = row.thumb
        b.sequence = ++i

        blocks.push(b)

        row.addStatus = 1
        // this.list[index].status=1;

        blockDataAdd(blocks).then(response => {
          if (response.code == '200') {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '添加失败!'
            })
          }

          // this.drawerShow = false
          this.$emit('refresh')
        })
      }, // end of function
      show(roleId ) {
        this.listQuery.roleId=roleId;

        console.log('打开窗口:', roleId)
        this.getList()
        this.dialogShow = true
      }
    }
  }
</script>
<style lang="scss" scoped></style>
